<template>
	<view class="">
		<view class="tanchuang" v-if="tanchuang">
			请选择查档用途
		</view>
		<view class="search2-top">
			<view class="search2-top-left" @click="backFn">
				<image class="search2-top-left-img" src="../../../static/images/search1/back.png" mode=""></image>
			</view>
			<view class="search" @click="backSearch">
				<image class="search-img" src="../../static/images/realestate/cha@3x.png" mode=""></image>
			</view>
			<view class="search2-top-center">
				不动产登记—网通办
			</view>
			<view class="search2-top-right">
				<image class="search2-top-right-img" src="../../static/images/marriage/Frame26@3x.png" mode=""></image>
			</view>
		</view>
		<view class="prove-top">
			<view class="prove-top-right" @click="backFn">
				<image class="prove-top-back" src="../../static/images/realestate/back.png" mode="" >
				</image>
				<text>返回</text>
			</view>
			<view class="prove-top-center">
				查询网点信息
			</view>
			<view class="prove-top-left">
				<image class="prove-top-home" src="../../static/images/realestate/home.png" mode="" @click="backFn">
				</image>
			</view>
		</view>
		<view class="query-contnt">
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					<text class="red">*</text>办理网点
				</view>
				<view class="query-contnt-item-right">
					{{xinxi.name}}
				</view>
			</view>
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					网点电话
				</view>
				<view class="query-contnt-item-right">
					{{xinxi.phone}}
				</view>
			</view>
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					网点地址
				</view>
				<view class="query-contnt-item-right">
					{{xinxi.address}}
				</view>
			</view>
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					<text class="red">*</text>查询范围
				</view>
				<view class="query-contnt-item-right">
					{{xinxi.fanwei}}
				</view>
			</view>
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					<text class="red">*</text>查档用途
				</view>

				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="query-contnt-item-right">
						<view class="choose-text" v-if="index==-1">
							请选择查档用途
						</view>
						<view v-else class="uni-input choose-text">{{array[index]}}</view>
						<view class="choose">
							<image class="choose-img" src="../../static/images/realestate/Frame@3x.png" mode=""></image>
						</view>
					</view>
				</picker>
			</view>
			<view class="query-contnt-item no-border">
				<view class="query-contnt-item-left">
					<text class="red">*</text>是否查询查封抵押
				</view>
				<view class="query-contnt-item-right">
					<view class="uni-padding-wrap">
						<radio-group @change="radioChange">
							<label class="radio">
								<view class="radio1">
									<radio name="query" value="是" checked="true" style="transform:scale(0.6)" />是
								</view>
								<view class="radio2">
									<radio name="query" value="否" style="transform:scale(0.6);" />否
								</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
		</view>
		<view class="query-bottom">
			<view class="query-left" @click="backFn">
				上一步
			</view>
			<view class="query-right" @click="nextFn">
				下一步
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	
	
	// 全部网点信息
	const info=[
		{
			name:'芝罘区',
			phone:'0535-2909555',
			address:'烟台市芝罘区塔山东路塔山明珠小区1号楼附104号',
			fanwei:'烟台芝罘区'
		},
		{
			name:'高新区',
			phone:'0535-6922577',
			address:'烟台市高新区科技大道69号创业大厦政务服务中心一楼',
			fanwei:'烟台高新区'
		},{
			name:'莱山区',
			phone:'0535-6881362',
			address:'烟台市莱山区清泉路2号（原市房产交易中心莱山分部）',
			fanwei:'烟台莱山区'
		},{
			name:'福山区',
			phone:'0535-3029621',
			address:'烟台市福山区永达街1021号（福山区政务服务中心）',
			fanwei:'烟台福山区'
		},{
			name:'开发区',
			phone:'0535-6119526',
			address:'烟台市开发区金沙江路83号（开发区政务服务中心）',
			fanwei:'烟台开发区'
		},{
			name:'牟平区',
			phone:'0535-4219772',
			address:'烟台市牟平区正阳路368号（牟平区政务服务中心）',
			fanwei:'烟台牟平区'
		}
	]
	// 判断信息
	const xinxi=ref({})
	const panduan=()=>{
		for(let i=0;i<info.length;i++){
		
			if(address.value==info[i].name){
				xinxi.value=info[i]
			}
		}
	}
	
	const tanchuang=ref(false)
	const address=ref('')
	onLoad((options) => {
	    address.value = options.address
		panduan()
	})
	const show = ref('0')
	const backFn = () => {
		uni.navigateBack(-1)
	}
	const backSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search1'
		})
	}
	const query = ref('是')
	const radioChange = (evt) => {
		query.value = evt.detail.value
	}

	const array = ref(['公积金提取', '抵押信息核实', '低保', '申请经济适用房', '公积金贷款', '人才补贴', '申请公共租凭住房', '信息核实', '入学', '办理户口', '契税纳缴',
		'遗失补证', '公证', '讼诉办案', '打防疫针', '申请住房补贴', '拆迁补偿'
	])
	const index = ref(-1)
	const aaa=ref('')
	const bindPickerChange = (e) => {
		// console.log('picker发送选择改变，携带值为', e.detail.value)
		index.value = e.detail.value
		aaa.value=array.value[index.value]
	}
	
	const nextFn=()=>{
		if(aaa.value!=''){
			let fanwei=xinxi.value.fanwei
			uni.navigateTo({
				url:'/pages/realestate/applicant?fanwei='+fanwei
			})
		}else if(aaa.value==''){
			tanchuang.value=true
			setTimeout(()=>{
				tanchuang.value=false
			},1000)
		}
		
	}
</script>

<style scoped lang="scss">
	
	.tanchuang{
		position: fixed;
		z-index: 33;
		padding: 40rpx 100rpx;
		background-color: rgba(40, 44, 53, 0.6);
		color: #fff;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius: 20rpx;
	}
	.search2-top {
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top: 96rpx;
		display: flex;

		.search2-top-left {
			width: 10%;

			.search2-top-left-img {
				width: 88rpx;
				height: 88rpx;
			}
		}

		.search {
			width: 10%;

			.search-img {
				width: 88rpx;
				height: 88rpx;
			}
		}

		.search2-top-center {
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 65%;
			padding-left: 38rpx;
			line-height: 88rpx;
		}

		.search2-top-right {
			width: 15%;
			display: flex;

			.search2-top-right-img {
				width: 80rpx;
				height: 80rpx;
			}

		}

	}

	.prove-top {
		width: 100%;
		display: flex;
		height: 86rpx;
		background: #3E87FF;
		line-height: 86rpx;
		padding: 0 28rpx;

		.prove-top-right {
			width: 20%;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			.prove-top-back {
				width: 36rpx;
				height: 36rpx;
				vertical-align: middle;
			}

		}

		.prove-top-center {
			width: 60%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

		}

		.prove-top-left {
			width: 20%;

			position: relative;
			.prove-top-home {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translate(0, -50%);
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;

			}
		}
	}

	.query-contnt {
		width: 92%;
		margin-left: 4%;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 16rpx 26rpx;
		margin-top: 24rpx;

		.query-contnt-item {
			display: flex;
			// height: 88rpx;
			padding-top: 28rpx;
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid #EBEDF0;
			// line-height: 88rpx;
			line-height: 49rpx;
			position: relative;

			.query-contnt-item-left {
				padding-right: 50rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #323233;

				.red {
					color: red;
				}
			}

			.query-contnt-item-right {
				flex: 1;
				display: flex;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #969798;
				.choose-text{
					// width: 90%;
				}

				.choose {
					flex: 1;
					.choose-img {
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
						position: absolute;
						right: 44rpx;
						// left: 254rpx;
						top: 35rpx;
					}
				}

				.uni-padding-wrap {
					.radio {
						display: flex;

						.radio1 {
							margin-left: 48rpx;
						}

						.radio2 {
							margin-left: 70rpx;
						}
					}
				}
			}
		}

		.no-border {
			border: 0;
		}

	}
	.query-bottom{
		width: 92%;
		margin-left: 4%;
		margin-top: 60rpx;
		display: flex;
		.query-left{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
		}
		.query-right{
			width: 542rpx;
			height: 72rpx;
			background: linear-gradient(93deg, #4089FF 0%, #0063FF 100%);
			box-shadow: 0rpx 4rpx 22rpx 0rpx #0465FF;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			opacity: 1;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 72rpx;
		
		}
	}
</style>